<template>
	<view class="bg">
		<view class="header">
			<uni-row>
				<uni-col :span="6">
					<view class="text-center"><image @click="onLink('/user/edit/edit')" class="avatar" :src="info.head_img ? info.head_img : 'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/avatar.png'" mode="aspectFill"></image></view>
				</uni-col>
				<uni-col :span="18">
					<view class="info-name" @click="onLink('/user/edit/edit')">{{info.name ? info.name : '--'}}<uni-icons type="gear" size="18" class="mt3"></uni-icons></view>
					<view class="info-brief">{{info.company_name ? info.company_name : ''}} {{info.post ? info.post : ''}}</view>
				</uni-col>
			</uni-row>
			<view class="header-info">
				<uni-row >
					<uni-col :span="6"><view class="text-center fz08rem"  @click="onLink('/pages/vip/vip')"><text class="header-vip">{{info.is_vip ? info.vip_name : '加入会员'}}</text></view></uni-col>
					<uni-col :span="12">
						<view class="text-left fz08rem"><text>关注：{{info.fans.my_idol_num ? info.fans.my_idol_num : '0'}} 粉丝：{{info.fans.my_fans_num ? info.fans.my_fans_num : '0'}}</text></view>
					</uni-col>
					<uni-col :span="6">
						<view class="text-right"><uni-tag :circle="true" type="warning" @click="onIntegral" text="签到+1" class="mr5" /></view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="vip">
			<uni-row class="p8">
				<uni-col :span="18">
					<text class="fw6">新筑会员</text><text class="fz08rem">免费下载全站资料及模型</text>
				</uni-col>
				<uni-col :span="6" class="text-right">
					<text class="vip-btn fz09rem" @click="onLink('/pages/vip/vip')">了解/开通</text>
				</uni-col>
			</uni-row>
			
		</view>
		<uni-card :border="false">
			<view class="grid">
				<view class="grid-info" v-for="(item,index) in grid" :key="index" @click="onLink(item.url)">
					<view class="integral" v-if="item.image"><image  class="grid-image" :src="item.image" mode="widthFix"></image></view>
					<view class="integral" v-else><text :animation="animationData" class="counter">{{info.integral}}</text></view>
					<view><text>{{item.name}}</text></view>
				</view>
			</view>
		</uni-card>
		<uni-card :border="false">
			<uni-section title="常用工具" type="line"></uni-section>
			<view class="grid">
				<view class="grid-info" v-for="(item,index) in list" :key="index" @click="onLink(item.url,item.type)">
					<image class="list-image" :src="item.image" mode="widthFix"></image>
					<view><text>{{item.name}}</text></view>
				</view>
			</view>
		</uni-card>
		
		<view class="text-center">
			<image class="mt15" style="width: 100%;height: auto;" src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/default-show.png" mode="widthFix"></image>
		</view>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>

<script>
import func from '../../api/func'
import customerVue from '../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				animation: null,
				info:{
					name:'未登录',
					head_img:'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/avatar.png',
					info:'',
					back_img:''
				},
				grid:[],
				list:[],
			}
		},
		onShow() {
			this.grid = [
				{name:'我的收藏',url:'/user/collect/collect',image:'user/collect.png'},
				{name:'我的积分',url:'/user/integral/integral',image:''},
				{name:'招聘管理',url:'/user/recruit/recruit',image:'user/recruit.png'},
				{name:'新筑会员',type: 'undo',url:'/pages/vip/vip',image:'user/user-vip.png?1'},
			]
			this.grid.forEach((e)=>{
				e.image = e.image ? func.fileUrl+e.image : ''
			})
			
			this.list = [
				{ type: 'person-filled',name:'个人主页',url:'/pages/user_info/user_info',image:'user/user-info.png'},
				{ type: 'map-filled',name:'我的企业',url:'/user/company/company',image:'user/user-org.png'},
				{ type: 'compose',name:'个人简历',url:'/user/resume/resume',image:'user/user-resume.png'},
				{ type: 'compose',name:'我的订单',url:'/user/order/order',image:'user/order.png?1'},
				{ type: 'compose',name:'互动评论',url:'/user/common/common',image:'user/user-common.png'},
				{ type: 'compose',name:'上传管理',url:'/user/trends/trends',image:'user/user-post.png'},
				{ type: 'wallet',name:'关于新筑',url:'/user/service/service',image:'user/user-service.png'},
				{ type: 'auth',name:'我的客服',url:'',image:'user/user-customer.png'},
			]
			this.list.forEach((e)=>{
				e.image = e.image ? func.fileUrl+e.image : ''
			})
			this.onGetData()
			
			this.animation = wx.createAnimation();
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/user','POST',{}).then(res => {
					_this.info = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onIntegral(){
				const animation = this.animation;
				const that = this;
				let num = this.info.integral;
				animation.translateY(100).step();
				this.animationData = animation.export()
				
				let _this = this
				this.$request_api('applet_api/user/integral','PUT',{}).then(res => {
					uni.showToast({
						title: res.code == 0 ? '签到成功' : res.msg,
						duration: 1000
					})
					if(res.code == 0){
						setTimeout(()=>{
							_this.info.integral = parseInt(num) + 1
						},1500)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onLink(url,type){
				if(type == 'auth'){
					this.$refs.popupCustomer.open('center')
					return;
				}
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style scoped lang="scss">
page{background-color: #f1f1f1;}
.bg{background-color: #f1f1f1;position: absolute;height: 100%;width: 100%;padding-bottom: 30px;}
.header{padding: 30px 15px 0px 15px;color: rgb(56, 56, 56);}
.header-info{top: -6px !important;position: relative;}
.header-vip{padding: .3vh 1.5vh;text-align: center;color: rgb(59, 25, 8);text-align: center;
	background: linear-gradient(to right, rgb(237,201,166), rgb(216,161,106));
    border-radius: 30rpx;
}
.avatar{width: 72px;height: 72px;border-radius: 72px;}
.info-name{height: 45px;line-height: 45px;font-size: 1.2rem;font-weight: 600;}
.sign-button{background-color: #FFD101;color: #FFF;border: 1px solid #FFD101;}

.grid{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid .list-image{width: 4vh;height: 4vh;}
.grid .grid-image{width: 4vh;height: 4vh;}
.grid-info{padding: 15rpx;text-align: center;}
.integral{
	height: 48px;line-height: 48px;font-size: 2.2rem;font-weight: 600;font-stretch: 80%;
	background: -webkit-linear-gradient(rgb(250,173,27), rgb(248,75,5));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}


.counter {counter-reset: section;}
.counter span::before {counter-increment: section;content: ' ' counter(section);}

.vip{
	margin: 0px 15px 15px 15px;
	padding: 0px 8px 0px 8px;
	height: 9vh;
	line-height: 9vh;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background: linear-gradient(to right, rgb(254,247,234), rgb(234,187,120));
	position: relative;
	top: 3vh;
}
.vip-btn{padding: 1vh 1vh;text-align: center;color: rgb(59, 25, 8);text-align: center;
	background: linear-gradient(to right, rgb(237,201,166), rgb(216,161,106));
    border-radius: 30rpx;
    font-weight: 600;
}
</style>
